<template>
  <div class="app-container">
    <el-card class="box-card" shadow="hover">
      <!-- 顶部信息区域 -->
      <div class="info-header">
        <div class="header-left">
          <div class="date-field">
            <span class="label">单据日期:</span>
            <el-date-picker
              v-model="orderData.orderDate"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              style="width: 150px"
            />
          </div>
          <div class="salesperson-field">
            <span class="label">业务员:</span>
            <el-select
              v-model="orderData.salesperson"
              clearable
              placeholder="请选择"
              style="width: 150px"
            >
              <el-option
                v-for="item in salesPersonOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="header-right">
          <el-button type="primary">保存并新增</el-button>
          <el-button type="primary">保存</el-button>
          <el-button>批量导入</el-button>
          <el-button>审核</el-button>
          <div class="attachment-info">
            <i class="el-icon-paperclip" /> 上传附件
            <span class="order-number">单据编号: DB202503210001</span>
          </div>
        </div>
      </div>

      <!-- 商品列表区域 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      >
        <el-table-column type="index" label="" width="50" />

        <el-table-column label="" width="180">
          <template slot="header">
            <div class="scan-toggle">
              <span class="required">*</span>商品 -
              <el-switch
                v-model="scanEnabled"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="扫描枪录入"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="productCategory"
          label="商品类别"
          width="120"
        />

        <el-table-column
          prop="productDescription"
          label="商品备注"
          width="140"
        />

        <el-table-column
          prop="attrCode"
          label="属性编码"
          width="100"
        />

        <el-table-column
          prop="brand"
          label="品牌"
          width="100"
        />

        <el-table-column prop="attr" label="属性" width="80" />

        <el-table-column prop="unit" label="单位" width="80" />

        <el-table-column label="数量" width="100">
          <template slot="header">
            <span class="required">*</span>数量
          </template>
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.quantity"
              :min="1"
              :max="9999"
              size="small"
              controls-position="right"
            />
          </template>
        </el-table-column>

        <el-table-column
          prop="batchNumber"
          label="批号"
          width="100"
        />

        <el-table-column
          prop="packageType"
          label="整件散包"
          width="100"
        />

        <el-table-column label="调出仓库" width="180">
          <template slot="header">
            <div class="warehouse-header">
              <span>调出仓库</span>
              <el-tag size="mini" type="info">批</el-tag>
            </div>
          </template>
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.sourceWarehouse"
              placeholder="请选择"
              size="small"
              style="width: 100%"
            >
              <el-option
                v-for="item in warehouseOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>

        <el-table-column label="调入仓库" width="180">
          <template slot="header">
            <div class="warehouse-header">
              <span>调入仓库</span>
              <el-tag size="mini" type="info">批</el-tag>
            </div>
          </template>
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.targetWarehouse"
              placeholder="请选择"
              size="small"
              style="width: 100%"
            >
              <el-option
                v-for="item in warehouseOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>

      <!-- 表格底部汇总行 -->
      <div class="summary-row">
        <span class="summary-label">合计:</span>
        <div class="summary-cells" />
      </div>

      <!-- 备注区域 -->
      <div class="remarks-section">
        <el-input
          v-model="orderData.remarks"
          type="textarea"
          :rows="3"
          placeholder="若无备注信息"
        />
      </div>

      <!-- 底部工具栏 -->
      <div class="footer-toolbar">
        <div class="left-tools">
          <el-button type="text" icon="el-icon-edit">自定义字段</el-button>
        </div>
        <div class="right-actions">
          <el-button type="text" icon="el-icon-time" @click="handleHistory">历史单据</el-button>
          <el-button type="text" icon="el-icon-notebook-2">操作日志</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'TransferOrder',
  data() {
    return {
      orderData: {
        orderDate: new Date().toISOString().substr(0, 10),
        salesperson: '',
        remarks: ''
      },
      scanEnabled: false,
      tableData: [
        {
          productCategory: '',
          productDescription: '',
          attrCode: '',
          brand: '',
          attr: '',
          unit: '',
          quantity: 1,
          batchNumber: '',
          packageType: '',
          sourceWarehouse: '',
          targetWarehouse: ''
        },
        {
          productCategory: '',
          productDescription: '',
          attrCode: '',
          brand: '',
          attr: '',
          unit: '',
          quantity: 1,
          batchNumber: '',
          packageType: '',
          sourceWarehouse: '',
          targetWarehouse: ''
        },
        {
          productCategory: '',
          productDescription: '',
          attrCode: '',
          brand: '',
          attr: '',
          unit: '',
          quantity: 1,
          batchNumber: '',
          packageType: '',
          sourceWarehouse: '',
          targetWarehouse: ''
        },
        {
          productCategory: '',
          productDescription: '',
          attrCode: '',
          brand: '',
          attr: '',
          unit: '',
          quantity: 1,
          batchNumber: '',
          packageType: '',
          sourceWarehouse: '',
          targetWarehouse: ''
        },
        {
          productCategory: '',
          productDescription: '',
          attrCode: '',
          brand: '',
          attr: '',
          unit: '',
          quantity: 1,
          batchNumber: '',
          packageType: '',
          sourceWarehouse: '',
          targetWarehouse: ''
        }
      ],
      salesPersonOptions: [
        { value: 'user1', label: '张三' },
        { value: 'user2', label: '李四' },
        { value: 'user3', label: '王五' }
      ],
      warehouseOptions: [
        { value: 'CK001', label: 'CK001 默认仓库' },
        { value: 'CK002', label: 'CK002 冷藏库' },
        { value: 'CK003', label: 'CK003 食品库' }
      ]
    }
  },
  methods: {
    // 点击历史单据
    handleHistory() {
      this.$router.push({
        name: 'TransferOrderHistoricalDocuments'
      })
    },
    addRow() {
      this.tableData.push({
        productCategory: '',
        productDescription: '',
        attrCode: '',
        brand: '',
        attr: '',
        unit: '',
        quantity: 1,
        batchNumber: '',
        packageType: '',
        sourceWarehouse: '',
        targetWarehouse: ''
      })
    },
    saveOrder() {
      this.$message({
        message: '保存成功',
        type: 'success'
      })
    },
    saveAndNew() {
      this.saveOrder()
      this.resetForm()
    },
    resetForm() {
      this.orderData = {
        orderDate: new Date().toISOString().substr(0, 10),
        salesperson: '',
        remarks: ''
      }
      this.tableData = [
        {
          productCategory: '',
          productDescription: '',
          attrCode: '',
          brand: '',
          attr: '',
          unit: '',
          quantity: 1,
          batchNumber: '',
          packageType: '',
          sourceWarehouse: '',
          targetWarehouse: ''
        }
      ]
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  /* background-color: #f0f2f5; */
}

.box-card {
  margin-bottom: 20px;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

.header-left {
  display: flex;
  align-items: center;
}

.date-field,
.salesperson-field {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.label {
  margin-right: 5px;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-right .el-button {
  margin-left: 10px;
}

.attachment-info {
  margin-left: 20px;
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
}

.order-number {
  margin-left: 20px;
  color: #666;
}

.scan-toggle {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.required {
  color: #f56c6c;
  margin-right: 2px;
}

.warehouse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.summary-row {
  display: flex;
  background-color: #fcfcfc;
  border: 1px solid #dfe6ec;
  border-top: none;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  font-weight: bold;
}

.summary-cells {
  flex: 1;
}

.remarks-section {
  margin-top: 20px;
}

.footer-toolbar {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
}

.right-actions {
  display: flex;
}

.el-input-number--small {
  width: 100%;
}
</style>
